<template>
  <h1>分页功能展示</h1>
  <ul>
    <li v-for="(item,index) in pageContent">{{ item }}</li>
  </ul>
  <div>
    <button @click="pre">上一页</button>
    去到：<input type="number" v-model="currentPage" @keydown.enter="page(currentPage)" @blur="page(currentPage)">页（回车确定）
    <button @click="next">下一页</button>
  </div>
  <br/>
  当前第{{ currentPage }}页，共{{ pageNum }}页
  <br/>

  <button @click="displayAll">在第一页内显示所有内容</button>
  <button @click="recovery">恢复</button>

</template>

<script>
export default {
  name: "PageServer",
  data() {
    return {
      countPages: 0,
      currentPage: 1,
      pageNum: 3,
      pageContent: [],
      content: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
    }
  },
  created() {
    //init
    this.countPages = this.content.length / this.pageNum
    // console.log(this.countPages)
    this.page(this.currentPage)
  },
  computed: {
    displayAll() {
      this.pageNum = 1;
      this.countPages = this.content.length / this.pageNum;
      this.page(1);
    },
    recovery() {
      this.pageNum = 3;
      this.countPages = this.content.length / this.pageNum;
      this.page(1);
    }
  },
  methods: {
    page(item) {
      this.currentPage = item;
      const list = (this.currentPage - 1) * this.countPages;
      this.pageContent = this.content.slice(list, list + this.countPages)
    },
    pre() {
      if (this.currentPage != 1) {
        this.currentPage--;
        this.page(this.currentPage);
      } else {
        return
      }
    },
    next() {
      if (this.currentPage < this.pageNum) {
        this.currentPage++;
        this.page(this.currentPage);
      } else {
        return
      }
    },

  }
}
</script>

<style scoped>

</style>